<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="btn1">设置数据</button>
    <button class="btn2">获取数据</button>
    <button class="btn3">清除数据</button>
    <button class="btn4">清除所有数据</button>
    <!-- 
        sessionStorage    存储当前的会话信息，当浏览器关闭之后会话数据就会丢失

        sessionStorage.getItem()  获取属性
        sessionStorage.setItem()  设置属性
        sessionStorage.removeItem()  删除单一属性
        sessionStorage.clear()   删除所有属性


     -->
    <script>
        var btn1=document.querySelector(".btn1")
        btn1.onclick=function()
        {
            sessionStorage.setItem('username','trump')
            sessionStorage.setItem('username2','biden')
            sessionStorage.setItem('username3','shadasd')

        }
        var btn2=document.querySelector(".btn2")
        btn2.onclick=function()
        {
            var a=sessionStorage.getItem('username')
            console.log(a);
        }
        var btn3=document.querySelector(".btn3")
        btn3.onclick=function()
        {
            sessionStorage.removeItem('username')
        }
        var btn4=document.querySelector(".btn4")
        btn4.onclick=function()
        {
           sessionStorage.clear()
        }

    </script>
    
</body>
</html>